<template>
  <div class="preview-paper">
    <h3 class="paper-name">{{ options.paper.name }}-错题</h3>
    <div class="result fx item-c">
      <div class="score">
        <span
          >你的得分: <span class="light">{{ options.score }}</span> 分</span
        >,
        <span>
          正确数: <span class="light">{{ options.corrCount }}</span></span
        >,
        <span>
          错误数: <span class="light">{{ options.errCount }}</span></span
        >,
        <span>
          用时:
          <span class="light">1 分钟 1 秒</span></span
        >
      </div>
      <el-button @click="fallback" size="large" type="primary">重做</el-button>
      <el-button @click="$router.back()" size="large" type="primary"
        >返回</el-button
      >
    </div>
    <el-form class="list">
      <el-form-item class="item" v-for="(item, i) in subjects" :key="i">
        <h4 class="name">{{ i + 1 }}. {{ item.name }}</h4>
        <el-radio-group :value="item.uAns">
          <div v-for="(o, index) in item.options" :key="index" class="radio">
            <el-radio :disabled="disabled" :label="map[index]"
              >{{ map[index] }}: {{ o }}</el-radio
            >
          </div>
        </el-radio-group>
        <div
          class="analysis e"
          :class="{ c: item.ans.toUpperCase() === item.uAns }"
        >
          <div class="ans">你的答案: {{ item.uAns }}</div>
          <div class="corr">正确答案是: {{ item.ans.toUpperCase() }}</div>
          <div class="a">解析: {{item.analysis ? item.analysis : '无'}}</div>
        </div>
      </el-form-item>
      <el-empty
        v-if="subjects.length === 0"
        description="没有错题哦, 太棒啦"
      ></el-empty>
    </el-form>
  </div>
</template>

<script>
import { getAnswerDetail } from "@/api/paper";
export default {
  data() {
    return {
      map: {
        0: "A",
        1: "B",
        2: "C",
        3: "D",
        4: "E",
        5: "F",
        6: "G",
        7: "H",
        8: "I",
        9: "J",
        10: "K",
      },
      name: "",
      disabled: true,
      loading: false,
      options: {
        errCount: 0,
        corrCount: 0,
        score: 0,
        time: "",
        paper: {
          paperId: "",
          name: "",
        },
        subjects: [
          {
            ans: "",
            uAns: "",
            options: [],
          },
        ],
      },
    };
  },
  computed: {
    score() {
      return 50;
    },
    subjects() {
      return this.options.subjects.filter(
        (item) => item.ans.toUpperCase() !== item.uAns
      );
    },
  },
  methods: {
    async getData(id) {},
    // 返回我的试卷
    fallback() {
      this.$router.push({ name: "examination", query: { paperId: this.options.paper.paperId } });
    },
  },

  async created() {
    const { ansId } = this.$route.query;
    const res = await getAnswerDetail(ansId);
    console.log(res)
    if (res.code === 1) {
      this.options = res.data[0];
    }
  },
};
</script>

<style scoped lang="scss">
.preview-paper {
  line-height: 1.5;
}

.paper-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.name {
  font-size: 17px;
}

.item {
  margin: 20px 0;
}

.radio {
  margin: 15px 0;
}

.analysis.e {
  color: red;
}

.analysis.c {
  color: green;
}

.score {
  margin-right: 100px;
}

.light {
  color: #008c8c;
  font-weight: bold;
  font-size: 20px;
}

.time {
  font-weight: bold;
}

.a {
  color: #333;
}
</style>
